<template>
  <div class="boxFour">
    <div class="headtop">
      <el-button
        type="success"
        v-for="(item, index) in btn"
        @click="showDemo(index)"
        >{{ item }}</el-button
      >
    </div>
    <div class="echartContent" v-show="cutTab == 0">
      <el-row>
        <el-col :span="8">
          <div
            style="width: 100%; height: calc(100vh - 200px)"
            id="fourEchartsOne"
          ></div>
        </el-col>
        <el-col :span="8">
          <div
            style="width: 100%; height: calc(100vh - 200px)"
            id="fourEchartsTwo"
          ></div>
        </el-col>
        <el-col :span="8">
          <div
            style="width: 100%; height: calc(100vh - 200px)"
            id="fourEchartsThree"
          ></div>
        </el-col>
      </el-row>
    </div>
    <div class="echartContentList" v-show="cutTab == 1">
      <el-card>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { sumBar, barGraph, pie } from "@/utils/index";
export default {
  components: {},

  data() {
    return {
      cutTab: 0,
      btn: ["图表", "表格"],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },

  mounted() {
    this.myEchartsOne();
    this.myEchartsTwo();
    this.myEchartsThree();
  },

  methods: {
    myEchartsOne() {
      this.$nextTick(() => {
        sumBar("fourEchartsOne");
      });
    },
    myEchartsTwo() {
      this.$nextTick(() => {
        barGraph("fourEchartsTwo");
      });
    },
    myEchartsThree() {
      this.$nextTick(() => {
        pie("fourEchartsThree");
      });
    },

    showDemo(value) {
      this.cutTab = value;
    },
  },
};
</script>

<style lang="less" scoped>
.boxFour {
  .headtop {
    text-align: center;
    height: 66px;
    line-height: 66px;
  }
  .echartContent,
  .echartContentList {
    width: calc(100vw - 20px);
    height: calc(100vh - 200px);
    border: 1px solid blue;
  }
}
</style>